<template>
    <div class="outerCircle circle" :style="{'width':outer,'height':outer }">
        <div class="innerCircle"  :style="{'width':inner,'height':inner }">

        </div>
    </div>
</template>

<script>
export default {
    props:{
        outer:{
          type:String,
          default: "3.5rem",
        },
        inner:{
          type:String,
          default: "2.3rem"
        }},
    name: "CircleLoading"
}
</script>

<style scoped>

.circle{
    display: flex;
    justify-content: center;
    align-items: center;
}
.outerCircle{
    border-radius: 50%;
    border: 5px solid lavender;
    border-top :5px solid  #eacf5e;
    border-bottom :5px solid #eacf5e;
    background: lavender;
    animation: anni 2s linear infinite;
}
.innerCircle{
    border-radius: 50%;
    border: 5px solid lavender;
    border-top :5px solid #eacf5e;
    border-bottom :5px solid #eacf5e;
    animation: anni2 1s linear infinite;
}
@keyframes anni{
    0%{
        transform: rotate(0deg);
    }100%{
         transform: rotate(360deg);
     }
}
@keyframes anni2{
    0%{
        transform: rotate(360deg);
    }100%{
         transform: rotate(0deg);
     }
}
</style>